<template>
    <div>
        <h3>父组件页面</h3>

        <p>{{ name }}</p>


        <div>==========================</div>
        <p>新名字：{{ newName }}</p>

        <!-- 引用子组件 -->
        <!-- <Child :name="name" :data="data" @updateName="updateName"></Child> -->
        <Child ref="data1"></Child>
        <p>{{ data1 }}</p>
        <button @click="onClick">调用子组件</button>
    </div>
</template>


<script setup>
import { ref, provide, nextTick } from 'vue';
import Child from './child.vue'

const name = ref('张三')
const data = ref({ age: 18, sex: '男' })
const data1 = ref({})

nextTick(() => {
    console.log("data1", data1.value)
})

const newName = ref('hello world')
// 向全局设置参数(注意：名字不能和其他业务中的名字重复)
provide('newName', newName)

// 定义一个修改名字的事件
function updateName(value) {
    console.log(value);

    name.value = value
}

function onClick() {
    data1.value.method()
}

</script>